<template>
    <!-- 添加SPU按钮 -->
    <el-button :disabled="!category3Id" @click="emit('setState', 1)" type="primary" icon="ele-CirclePlusFilled">添加SPU
    </el-button>

    <!-- SPU数据表格 -->
    <el-table :data="tableData" border stripe :style="{ margin: '30px 0 ' }">
        <el-table-column type="index" width="100" label="序号" align="center" />
        <el-table-column label="SPU名称" prop="spuName" />
        <el-table-column label="SPU描述" prop="description" />
        <el-table-column label="操作" width="300px" align="center">
            <template #="{ row, $inidex }">
                <el-button type="primary" @click="emit('setState', 2, row)" title="添加SKU" icon="ele-Plus"></el-button>
                <el-button type="primary" @click="emit('setState', 1, row)" title="编辑SPU" icon="ele-Edit"></el-button>
                <el-button type="info" @click="showSkuList(row.id)" title="查看SKU" icon="ele-Warning"></el-button>
                <el-button type="danger" @click="deleteSpu(row.id)" title="删除SPU" icon="ele-Delete"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 页码 -->
    <el-pagination v-model:current-page="page" v-model:page-size="limit" :pager-count="7" :total="total"
        :page-sizes="[3, 5, 7, 10]" layout="prev, pager, next , sizes, total"></el-pagination>


    <!-- skuList弹窗数据 -->
    <el-dialog v-model="dialogTableVisible" title="sku列表">
        <el-table :data="skuListData">
            <el-table-column label="名称" prop="skuName"/>
            <el-table-column label="价格" prop="price"/>
            <el-table-column label="重量" prop="weight"/>
            <el-table-column label="图片"  width="200" >
                <template #="{row}">
                    <img :src="row.skuDefaultImg" width="100" height="100"/>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { storeToRefs } from "pinia";
import { requestSpuPage, requestDeleteSpu } from "@/api/spu";
import type { supInfoType } from "@/api/spu";
import { ElMessage } from "element-plus";
import { requestFindBySpuId } from "@/api/sku";

export default defineComponent({
    name: "SpuList",
});
</script>

<script setup lang="ts">
import { ref, watch } from "vue"
import useAttrStore from "@/stores/attr";

//拿到category3Id
const attrStore = useAttrStore()
const { category3Id } = storeToRefs(attrStore)

//接收父组件传递的自定义事件，点击添加或修改调用，显示添加或修改组件
const emit = defineEmits<{
    (event: 'setState', state: number, row?: supInfoType): void
}>()

//定义页码数据
const page = ref(1)
const limit = ref(5)
const total = ref(0)
//定义表格数据
const tableData = ref<supInfoType[]>([])

//封装函数请求spu分页列表
const getSpuPageList = async () => {
    try {
        const result = await requestSpuPage(page.value, limit.value, category3Id.value as number)
        tableData.value = result.records
        total.value = result.total
    } catch (error) {
        //失败提示
        ElMessage.error("请求spu分页列表失败!")
    }
}
//1.监听category3Id改变发送spu分页列表请求
watch(category3Id, async () => {
    //判断3Id为null的时候不发请求，并且清空spu分页列表
    if (!category3Id.value) {
        tableData.value = []
        total.value = 0
        return
    }
    //发送请求
    getSpuPageList()
}, { immediate: true })

//2.监听页码改变发送请求
watch([page, limit], () => {
    if (category3Id.value === null) return
    //请求分页列表
    getSpuPageList()
})

//4.删除spu
const deleteSpu = async (spuId: number) => {
    try {
        await requestDeleteSpu(spuId)
        ElMessage.success("删除成功!")
        //删除成功重新请求分页列表
        getSpuPageList()
    } catch (error) {
        ElMessage.error("删除spu失败!")
    }
}


//定义数据控制sku列表弹窗显示隐藏
const dialogTableVisible = ref(false)
//定义sku表格数据
const skuListData = ref([])
//5.查看sku列表
const showSkuList = async (spuId: number) => {
    try {
        //得到sku列表数据赋值给响应式数据
        const result = await requestFindBySpuId(spuId)
        skuListData.value = result
        //展示弹窗数据
        dialogTableVisible.value = true
    } catch (e) {
        ElMessage.error("请求sku列表失败!")
    }
}

</script>